<template>
	<div class="upload-thumb">
		<vuedraggable :list="uploadList" :disabled="!draggable||!multiple" :animation="200" class="list-group" ghost-class="thumb-ghost"
		 @end="onEnd">
			<div class="upload-list" :style="{width: width, height: height, lineHeight: height}" v-for="(item, index) in uploadList"
			 :key="index">
				<div v-if="item.status == 'finished'">
					<img :src="item.url" :style="{height: height}" />
					<div class="upload-list-cover">
						<Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
						<Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
					</div>
				</div>
				<div v-else>
					<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
				</div>
			</div>
		</vuedraggable>
		<template v-if="limit>uploadList.length">
			<Upload ref="upload" :multiple="false" :show-upload-list="false" :on-success="handleSuccess" :on-error="handleError"
			 :format="format" :accept="accept" :max-size="maxSize*1024" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
			 :before-upload="handleBeforeUpload" type="drag" :action="uploadFileUrl" :headers="accessToken" class="upload-btn"
			 :style="{width: width}" :data="data">
				<div class="upload-camera" :style="{width: width, height: height, lineHeight: height}">
					<Icon type="md-camera" size="20"></Icon>
				</div>
			</Upload>
		</template>

		<Modal title="图片裁剪" v-model="cropperModal" :styles="{top: '30px'}" draggable :width="imgWidth+30">
			<Alert show-icon type="error">
				<span>图片尺寸 {{imgWidth*enlarge}}px<span style="margin: 0 2px;">*</span>{{imgHeight*enlarge}}px </span>
				<span>您可以通过滑动鼠标中轴来进行图片缩放调整</span>
			</Alert>
			<vueCropper :style="{width: imgWidth+'px', height: imgHeight+'px'}" ref="cropper" :img="option.img" :outputType="option.outputType"
			 autoCrop :full="false" :original="false" :centerBox="false" :fixedBox="true" fixed :autoCropWidth="autoCropWidth"
			 :autoCropHeight="autoCropHeight" mode="100% auto" :fixedNumber="[autoCropWidth,autoCropHeight]" :enlarge="enlarge" @realTime="realTime" ></vueCropper>
			<p style="margin-top: 10px;"></p>
			<div :style="previewStyle" class="margin-top-10">
				<div :style="previews.div">
					<img :src="previews.url" :style="previews.img" />
				</div>
			</div>
			<div slot="footer">
				<Button type="text" @click="cropperModal=false">取消</Button>
				<Button type="primary" :loading="uploadLoading" @click="upload" icon="ios-cloud-upload-outline">上传裁剪后的图片</Button>
			</div>
		</Modal>

		<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
			<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
			<div slot="footer">
				<Button @click="viewImage=false">关闭</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	//https://github.com/xyxiao001/vue-cropper
	import {
		uploadFile,
		base64Upload
	} from "@/api/index";
	import vuedraggable from "vuedraggable";
	import {
		VueCropper
	} from "vue-cropper";

	export default {
		name: "uploadPicThumbCropperV1",
		components: {
			VueCropper,
			vuedraggable
		},
		props: {
			value: {
				type: Object
			},
			draggable: {
				type: Boolean,
				default: true
			},

			multiple: {
				type: Boolean,
				default: true
			},
			maxSize: {
				type: Number,
				default: 5
			},

			limit: {
				type: Number,
				default: 10
			},
			width: {
				type: String,
				default: "60px"
			},
			height: {
				type: String,
				default: "60px"
			},
			format: {
				type: Object,
				default: new Array('jpg', 'jpeg', 'png'),
			},
			accept: {
				type: String,
				default: '.jpg,.jpeg,.png',
			},
			data: {
				type: Object,
				default: null,
			},
			imgWidth: {
				type: Number,
				default: 800
			},
			imgHeight: {
				type: Number,
				default: 500
			},
			autoCropWidth: {
				type: Number,
				default: 200
			},
			autoCropHeight: {
				type: Number,
				default: 200
			},
			enlarge: {// 	图片根据截图框输出比例倍数
				type: Number,
				default: 1
			},

		},
		data() {
			return {
				cropperModal: false,
				option: {
					img: '',
					//img:'https://i.loli.net/2019/03/12/5c87521fb8ae9.jpeg',
					outputType: "png"
				},
				previews: {},
				previewStyle: {},
				uploadLoading:false,
				accessToken: {},
				uploadFileUrl: uploadFile,
				uploadList: [],
				viewImage: false,
				imgUrl: ""
			};
		},
		methods: {
			onEnd() {
				this.returnValue();
			},

			init() {
				this.setData(this.value, true);
				this.accessToken = {
					accessToken: this.getStore("accessToken")
				};
			},
			handleView(imgUrl) {
				this.imgUrl = imgUrl;
				this.viewImage = true;
			},
			handleRemove(file) {
				const uploadList = this.uploadList;
				this.uploadList.splice(uploadList.indexOf(file), 1);
				this.returnValue();
			},
			handleSuccess(res, file) {
				if (res.success) {
					this.option.img = res.result;
					this.cropperModal = true;

				} else {
					this.$Message.error(res.message);
				}


			},
			handleError(error, file, fileList) {
				this.$Message.error(error.toString());
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: "不支持的文件格式",
					desc: "所选文件‘ " +
						file.name +
						" ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
				});
			},
			handleMaxSize(file) {
				this.$Notice.warning({
					title: "文件大小过大",
					desc: "所选文件‘ " +
						file.name +
						" ’大小过大, 不得超过 " +
						this.maxSize +
						"M."
				});
			},
			handleBeforeUpload() {
				if (this.multiple && this.uploadList.length >= this.limit) {
					this.$Message.warning("最多只能上传" + this.limit + "张图片");

					return false;
				}
				return true;
			},
			returnValue() {
				if (!this.uploadList || this.uploadList.length < 1) {
					if (!this.multiple) {
						this.$emit("input", "");
						this.$emit("on-change", "");
					} else {
						this.$emit("input", []);
						this.$emit("on-change", []);
					}
					return;
				}
				if (!this.multiple) {
					// 单张
					let v = this.uploadList[0].url;
					this.$emit("input", v);
					this.$emit("on-change", v);
				} else {
					let v = [];
					this.uploadList.forEach(e => {
						v.push(e.url);
					});
					this.$emit("input", v);
					this.$emit("on-change", v);
				}
			},
			setData(v, init) {
				if (typeof v == "string") {
					// 单张
					if (this.multiple) {
						this.$Message.warning("多张上传仅支持数组数据类型");
						return;
					}
					if (!v) {
						this.uploadList = [];
						return;
					}

					this.uploadList = [];
					let item = {
						url: v,
						status: "finished"
					};
					this.uploadList.push(item);
					this.$emit("on-change", v);
				} else if (typeof v == "object") {
					// 多张
					if (!this.multiple) {
						this.$Message.warning("单张上传仅支持字符串数据类型");
						return;
					}
					this.uploadList = [];
					if (v.length > this.limit) {
						for (let i = 0; i < this.limit; i++) {
							let item = {
								url: v[i],
								status: "finished"
							};
							this.uploadList.push(item);
						}
						this.$emit("on-change", v.slice(0, this.limit));
						if (init) {
							this.$emit("input", v.slice(0, this.limit));
						}
						this.$Message.warning("最多只能上传" + this.limit + "张图片");
					} else {
						v.forEach(e => {
							let item = {
								url: e,
								status: "finished"
							};
							this.uploadList.push(item);
						});
						this.$emit("on-change", v);
					}

				}

			},
			// 实时预览
			realTime(data) {
				let preview = data,
					h = 0.5;
				this.previewStyle = {
					width: preview.w + "px",
					height: preview.h + "px",
					overflow: "hidden",
					margin: "0",
					zoom: h
				};
				this.previews = data;
			},
			upload() {
				// 获取截图的base64 数据
				this.$refs.cropper.getCropData(data => {
					this.uploadLoading = true;
					base64Upload({
						base64: data
					}).then(res => {
						this.uploadLoading = false;
						if (res.success) {
							let f = {
								status: 'finished',
								url: res.result
							}
							//单张图片处理
							if (!this.multiple && this.uploadList.length > 0) {
								// 删除第一张
								this.uploadList.splice(0, 1);
							}
							this.uploadList.push(f);
							// 返回组件值
							this.returnValue();
							this.$Message.success("上传成功");
							this.cropperModal = false;

						} else {
							this.$Message.error(res.message);
						}
					});
				});
			}
		},
		mounted() {
			this.init();
		},
		watch: {
			value(val) {
				this.setData(val);
			}
		},

	};
</script>

<style lang="less">
	.upload-thumb {
		.upload-list {
			display: inline-block;
			text-align: center;
			border: 1px solid transparent;
			border-radius: 4px;
			overflow: hidden;
			background: #fff;
			position: relative;
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
			margin-right: 5px;
		}

		.upload-list img {
			object-fit: cover;
		}

		.upload-btn {
			display: inline-block;
		}

		.upload-list-cover {
			display: none;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.upload-list:hover .upload-list-cover {
			display: block;
		}

		.upload-list-cover i {
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}

		.list-group {
			display: inline-block;
		}

		.thumb-ghost {
			opacity: 0.5;
			background: #c8ebfb;
		}
	}
</style>
